<template>
  <div class="admin-page">
    <div class="page-header">
      <h1 class="page-title">看板管理</h1>
      <p class="page-subtitle">管理系统中的所有看板</p>
    </div>
    
    <el-card class="content-card" shadow="never">
      <template #header>
        <div class="card-header">
          <span class="card-title">看板列表</span>
          <div class="header-actions">
            <el-radio-group v-model="viewMode" size="small" style="margin-right: 12px">
              <el-radio-button label="all">所有看板</el-radio-button>
              <el-radio-button label="user">我的看板</el-radio-button>
            </el-radio-group>
            <el-button type="primary" @click="openCreateDialog">
              <el-icon><Plus /></el-icon> 新增看板
            </el-button>
          </div>
        </div>
      </template>
    <el-table :data="pagedList" v-loading="loading">
      <el-table-column prop="kanbanId" label="ID" width="80" />
      <el-table-column prop="kanbanName" label="名称" />
      <el-table-column prop="teamId" label="团队" width="120" />
      <el-table-column prop="description" label="描述" />
      <el-table-column prop="creatorId" label="创建者" width="100">
        <template #default="{ row }">
          {{ getUserName(row.creatorId) }}
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" width="180">
        <template #default="{ row }">
          {{ formatDateTime(row.createTime) }}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="140">
        <template #default="{ row }">
          <el-button link type="primary" @click="$router.push(`/kanban/${row.kanbanId}`)">详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin-top:12px; display:flex; justify-content:flex-end">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="list.length"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10,20,50,100]"
      />
    </div>
    
    <!-- 新增看板对话框 -->
    <el-dialog v-model="showAddDialog" title="新增看板" width="500px">
      <el-form :model="kanbanForm" label-width="80px" :rules="rules" ref="formRef">
        <el-form-item label="名称" prop="kanbanName">
          <el-input v-model="kanbanForm.kanbanName" placeholder="请输入看板名称"></el-input>
        </el-form-item>
        <el-form-item label="团队" prop="teamId">
          <el-select v-model="kanbanForm.teamId" placeholder="请选择团队" style="width: 100%" :loading="teamsLoading">
            <el-option
              v-for="team in availableTeams"
              :key="team.teamId"
              :label="`${team.teamName} (ID: ${team.teamId})`"
              :value="team.teamId"
            />
            <template #empty>
              <div style="padding: 12px; text-align: center; color: #909399;">
                <p style="margin: 0 0 8px 0;">暂无可用团队</p>
                <p style="margin: 0; font-size: 12px;">请先创建或加入团队</p>
              </div>
            </template>
          </el-select>
        </el-form-item>
        <el-form-item label="描述">
          <el-input v-model="kanbanForm.description" type="textarea" rows="3" placeholder="请输入看板描述"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="showAddDialog = false">取消</el-button>
          <el-button 
            type="primary" 
            @click="submitForm" 
            :loading="submitting"
            :disabled="availableTeams.length === 0"
          >
            确定
          </el-button>
          <el-button 
            v-if="availableTeams.length === 0" 
            type="success" 
            @click="goToTeamManagement"
            style="margin-left: 8px;"
          >
            去创建团队
          </el-button>
        </div>
      </template>
    </el-dialog>
  </el-card>
  </div>
</template>

<script setup>
import { onMounted, ref, watch, computed } from 'vue'
import { useRouter } from 'vue-router'
import { api } from '@/utils/api'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

const router = useRouter()

const list = ref([])
const loading = ref(false)
const currentPage = ref(1)
const pageSize = ref(10)
const pagedList = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value
  return list.value.slice(start, start + pageSize.value)
})
const viewMode = ref('all')
const showAddDialog = ref(false)
const submitting = ref(false)
const formRef = ref(null)

// 用户映射
const userMap = ref(new Map())

// 团队相关数据
const availableTeams = ref([])
const teamsLoading = ref(false)

// 表单数据
const kanbanForm = ref({
  kanbanName: '',
  teamId: '',
  description: '',
  creatorId: localStorage.getItem('userId') || '1'
})

// 格式化时间显示
function formatDateTime(dateTime) {
  if (!dateTime) return '-'
  const date = new Date(dateTime)
  if (isNaN(date.getTime())) return dateTime
  return date.toLocaleString('zh-CN', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
    hour: '2-digit',
    minute: '2-digit'
  })
}

// 获取用户信息
async function loadUserInfo(userIds) {
  if (!userIds || userIds.length === 0) return
  
  try {
    // 过滤掉已经获取过的用户ID
    const newUserIds = userIds.filter(id => !userMap.value.has(id))
    if (newUserIds.length === 0) return
    
    // 批量获取用户信息
    const usersResp = await api.get('/user/list', { page: 1, size: 1000 })
    const allUsers = Array.isArray(usersResp) ? usersResp : (usersResp.records || [])
    // 过滤出需要的用户
    const userList = allUsers.filter(user => newUserIds.includes(user.userId))
    
    // 更新用户映射
    userList.forEach(user => {
      if (user.userId) {
        userMap.value.set(user.userId, {
          username: user.username,
          nickname: user.nickname
        })
      }
    })
  } catch (e) {
    console.warn('获取用户信息失败:', e)
  }
}

// 根据用户ID获取用户名
function getUserName(creatorId) {
  if (!creatorId) return '-'
  const user = userMap.value.get(creatorId)
  return user ? (user.nickname || user.username || creatorId) : creatorId
}

// 表单验证规则
const rules = {
  kanbanName: [{ required: true, message: '请输入看板名称', trigger: 'blur' }],
  teamId: [{ required: true, message: '请选择团队', trigger: 'change' }]
}

// 加载用户可访问的团队列表
const loadAvailableTeams = async () => {
  teamsLoading.value = true
  try {
    const uid = localStorage.getItem('userId')
    const teamsResponse = await api.get('/team/list/user', { userId: uid })
    const teams = Array.isArray(teamsResponse?.data) ? teamsResponse.data : []
    
    // 为每个团队获取用户的角色信息
    const teamsWithRoles = await Promise.all(
      teams.map(async (team) => {
        try {
          const roleResponse = await api.get('/team/member/role/get', {
            teamId: team.teamId,
            userId: parseInt(uid)
          })
          
          if (roleResponse?.success && roleResponse?.data) {
            return {
              ...team,
              role: roleResponse.data.teamRole === 'leader' ? 'leader' : 'member'
            }
          } else {
            return { ...team, role: 'member' }
          }
        } catch (roleError) {
          console.warn(`Failed to get role for team ${team.teamId}:`, roleError)
          return { ...team, role: 'member' }
        }
      })
    )
    
    availableTeams.value = teamsWithRoles
  } catch (error) {
    console.error('加载团队列表失败:', error)
    ElMessage.error('加载团队列表失败：' + (error.message || '未知错误'))
  } finally {
    teamsLoading.value = false
  }
}

// 加载看板数据
const loadKanbans = async () => {
  loading.value = true
  try {
    if (viewMode.value === 'all') {
      // 使用新添加的获取所有看板接口
      list.value = await api.get('/api/kanban/all')
    } else {
      // 获取用户关联的看板
      const uid = localStorage.getItem('userId') || '1'
      list.value = await api.get(`/api/kanban/user/${uid}`)
    }
    
    // 获取所有创建者的用户信息
    const creatorIds = [...new Set(list.value.map(kanban => kanban.creatorId).filter(Boolean))]
    if (creatorIds.length > 0) {
      await loadUserInfo(creatorIds)
    }
    
    currentPage.value = 1
  } catch (error) {
    console.error('加载看板失败:', error)
  } finally {
    loading.value = false
  }
}

// 打开创建对话框
const openCreateDialog = () => {
  showAddDialog.value = true
  // 重置表单
  kanbanForm.value = {
    kanbanName: '',
    teamId: '',
    description: '',
    creatorId: localStorage.getItem('userId') || '1'
  }
  // 加载团队列表
  loadAvailableTeams()
}

// 提交表单
const submitForm = async () => {
  if (!formRef.value) return
  
  await formRef.value.validate(async (valid) => {
    if (valid) {
      submitting.value = true
      try {
        const result = await api.post('/api/kanban', kanbanForm.value)
        ElMessage.success('看板创建成功')
        showAddDialog.value = false
        // 重置表单
        kanbanForm.value = {
          kanbanName: '',
          teamId: '',
          description: '',
          creatorId: localStorage.getItem('userId') || '1'
        }
        // 重新加载看板列表
        loadKanbans()
      } catch (error) {
        ElMessage.error(`创建失败: ${error.message || '未知错误'}`)
      } finally {
        submitting.value = false
      }
    }
  })
}

// 跳转到团队管理页面
const goToTeamManagement = () => {
  showAddDialog.value = false
  router.push('/u/teams')
}

// 监听视图模式变化
watch(viewMode, () => {
  currentPage.value = 1
  loadKanbans()
})

onMounted(() => {
  loadKanbans()
})
</script>

<style scoped>
.admin-page {
  padding: 24px;
  background: #f5f7fa;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
}

.page-title {
  font-size: 24px;
  font-weight: 600;
  color: #1f2937;
  margin: 0 0 8px 0;
}

.page-subtitle {
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}

.content-card {
  border-radius: 12px;
  border: 1px solid #e5e7eb;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
}

.header-actions {
  display: flex;
  align-items: center;
}

:deep(.el-card__header) {
  padding: 20px 24px;
  border-bottom: 1px solid #f3f4f6;
  background: #fafbfc;
}

:deep(.el-card__body) {
  padding: 24px;
}

:deep(.el-table) {
  border-radius: 8px;
  overflow: hidden;
}

:deep(.el-table th) {
  background: #f8fafc;
  color: #374151;
  font-weight: 600;
}

:deep(.el-table td) {
  border-bottom: 1px solid #f3f4f6;
}

:deep(.el-table tr:hover > td) {
  background: #f8fafc;
}

:deep(.el-pagination) {
  justify-content: flex-end;
}
</style>